{include file="/common/vue3" /}

<div id="settings" class="invoice-index panel panel-default panel-intro" v-cloak>
    <el-container class="panel-block">
        <el-header class="sa-header">
            <div class="sa-title sa-flex sa-row-between">
                <div class="sa-title-left">
                    <div class="left-name">达标明细</div>
                </div>
                <div class="sa-title-right">
                    <el-button class="sa-button-refresh" icon="RefreshRight" @click="loadData"></el-button>
                    <el-button icon="Plus" type="primary" @click="handleAdd">添加</el-button>
                </div>
            </div>
        </el-header>
        <el-main class="sa-main">
            <el-table :data="tableData" stripe>
              <el-table-column label="等级名称" min-width="140">
                <template #default="scope">
                  <div>
                    {{ scope.row.level_name }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="达标数量" prop="amount" min-width="120"></el-table-column>
              <el-table-column label="操作" min-width="140">
                <template #default="scope">
                    <el-button type="primary" link
                      @click="handleEdit(scope.row)" >编辑
                    </el-button>
                    <el-button type="danger" link
                      @click="handleDel(scope.row)" >删除
                    </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500">
              <el-form>
                <el-form-item label="等级名称" :label-width="formLabelWidth">
                  <el-select
                    v-model="levelId"
                    placeholder="请选择"
                    size="large"
                    @change="handleChange"
                  >
                    <el-option
                      v-for="item in levels"
                      :key="item.id"
                      :label="item.level_name"
                      :value="item.id"
                      ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="达标数量" :label-width="formLabelWidth">
                  <el-input v-model="amount" autocomplete="off" />
                </el-form-item>
              </el-form>
              <template #footer>
                <div class="dialog-footer">
                  <el-button type="primary" @click="handleSave">
                    保存
                  </el-button>
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                </div>
              </template>
            </el-dialog>
        </el-main>
    </el-container>
</div>
